<header>
    iPhone中的安全显示区域
</header>
<img src="./images/iphone-safe-view.jpg" width="100%" />
<p>
    比如对底部小黑条做适配，我们可以这样：
</p>
<pre tag="css">
body{
    padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS &lt; 11.2 */
    padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS &gt;= 11.2 */
}
</pre>
<p>
    一共有四个区域，分别是：
</p>
<ol>
    <li>
        safe-area-inset-left：安全区域距离左边边界的距离
    </li>
    <li>
        safe-area-inset-right：安全区域距离右边边界的距离
    </li>
    <li>
        safe-area-inset-top：安全区域距离顶部边界的距离
    </li>
    <li>
        safe-area-inset-bottom ：安全距离底部边界的距离
    </li>
</ol>